<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            height:70px;
            width: 360px;
            padding-top: 360px;
            border:1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
            background: url(img/01big.jpg) no-repeat;
        }
        #box li{
            float: left;
        }
        #box ul{
            overflow: hidden;
            border-top: 1px solid #ccc;
        }
    </style>
    <>
    window.onload = function(){
    var box = document.getElementById("box");
    function mfn(liid,bg){
    var obj = document.getElementById(liid);
    obj.onmouseover = function(){
    box.style.backgroundImage=bg;
    }
    }
    mfn("li01","url(img/01big.jpg)");
    mfn("li02","url(img/02big.jpg)");
    mfn("li03","url(img/03big.jpg)");
    mfn("li04","url(img/04big.jpg)");
    mfn("li05","url(img/05big.jpg)");

    }
</>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01" ><img src="img/01.jpg" alt=""  name="bg"/></li>
        <li id="li02"><img src="img/02.jpg" alt=""  name="bg"/></li>
        <li id="li03"><img src="img/03.jpg" alt=""  name="bg" /></li>
        <li id="li04"><img src="img/04.jpg" alt=""  name="bg" /></li>
        <li id="li05"><img src="img/05.jpg" alt=""  name="bg" /></li>
    </ul>
</div>

</body>
</html>